<script setup>
import Outline from "./outline.vue"
import Vehicle from "./vehicle.vue"

import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue"

onMounted(() => {

})

const tabsActive = ref(1);
const componentTabs = ref(Outline);

const tabsList = reactive([
  {label: "Outline Statistics", value: 1, component: Outline},
  {label: "Vehicle Statistics", value: 2, component: Vehicle},
])

function tabsClick(value, component){
  tabsActive.value = value;
  componentTabs.value = component || '';
}

</script>
<template>
  <div class="tabs_page">
    <div 
      class="tabs_item" 
      :class="tabsActive == item.value ? 'tabs_active' : ''" 
      v-for="item in tabsList" 
      :key="item.value"
      @click="tabsClick(item.value, item.component)"
    >
      {{item.label}}
    </div>
  </div>
  <component :is="componentTabs"></component>
</template>
<style scoped lang="less">
// .tabs_page{
//   color: var(--mw-font-color-content);
//   width: 100%;
//   height: 50px;
//   line-height: 50px;
//   background-color: var(--mw-page-background-color);
//   padding: 0 20px;
//   display: flex;
//   .tabs_item{
//     margin-right: 50px;
//     cursor: pointer;
//     user-select: none;
//     font-size: 16px;
//   }
//   .tabs_active{
//     color: var(--mw-tabs-menu-active-color);
//     border-bottom: 2px solid var(--mw-tabs-menu-active-color);
//   }
// }
.tabs_page{
  width: 100%;
  height: 50px;
  line-height: 60px;
  background-color: var(--mw-page-background-color);
  padding: 0 20px;
  display: flex;
  .tabs_item{
    margin-right: 50px;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
  }
  .tabs_active{
    color: var(--mw-tabs-menu-active-color);
    border-bottom: 2px solid var(--mw-tabs-menu-active-color);
  }
}
</style>